<template>
  <div class="div1" v-if="JSON.stringify(list) != '{}'">
    <div class="title">{{list.blog.title}}</div>
    <div class="itemtitle">
      {{list.blog.time}}
      <div class="imgdiv">
        <img src="@/assets/yanjing.png" title="浏览量" alt class="icon" />
      </div>
      <font class="imgfont">{{list.blog.browse+1}}</font>

      <div class="imgdiv">
        <img src="@/assets/pinglun.png" title="评论量" alt class="icon" />
      </div>
      <font class="imgfont">{{comment}}</font>
      <div class="imgdiv">
        <img src="@/assets/zan.png" title="点赞" class="icon" v-if="zan" @click="zanf()" />
        <img src="@/assets/zan2.png" title="点赞" class="icon" v-if="!zan" @click="zanf()" />
      </div>
      <font class="imgfont">{{list.blog.fabulous+fabulous}}</font>
      <div class="imgdiv">
        <img
          src="@/assets/shoucang.png"
          title="收藏"
          class="icon"
          v-if="shoucang"
          @click="shoucangf()"
        />
        <img
          src="@/assets/shoucang2.png"
          title="收藏"
          class="icon"
          v-if="!shoucang"
          @click="shoucangf()"
        />
      </div>
      <font class="imgfont">{{list.blog.collection+collection}}</font>
    </div>
    <div class="neirong">
      <div v-html="html"></div>
    </div>
    <blogpinglun @func="getMsgFormSon" :id="index"></blogpinglun>
    <el-dialog title="收藏夹选择" :visible.sync="outerVisible">
      <el-dialog title="创建收藏夹" :visible.sync="innerVisible" width="30%" append-to-body>
        <div class="xxshuru">
          <el-input
            class="name"
            placeholder="请输入收藏夹名称"
            size="small"
            v-model="inputname"
            maxlength="10"
          >
            <i slot="prefix" class="el-input__icon el-icon-tickets"></i>
          </el-input>
          <el-input
            class="name"
            placeholder="请输入收藏夹名称"
            size="small"
            v-model="inputms"
            maxlength="120"
          >
            <i slot="prefix" class="el-input__icon el-icon-edit"></i>
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tianjia">确 定</el-button>
        </span>
      </el-dialog>
      <div class="dialog1">
        <div class="item1" v-for="(item,index) in scjlist" :key="index">
          <h4 @click="sc(item.favorite.id)">{{item.favorite.name}}</h4>
          <font>{{item.favorite.miaoshu}}</font>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">创建收藏夹</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import blogpinglun from "@/components/blogitem/blogpinglun";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  props: ["index"],
  data() {
    return {
      zan: true,
      shoucang: true,
      id: 0,
      html: "",
      list: {},
      fabulous: 0,
      collection: 0,
      comment: 0,
      cid: 0,
      outerVisible: false,
      innerVisible: false,
      scjlist: [],
      inputname: "",
      inputms: ""
    };
  },
  methods: {
    tianjia() {
      this.$http
        .get(
          this.poot +
            "insertfavorite/" +
            this.user +
            "/" +
            this.inputname +
            "/" +
            this.inputms
        )
        .then(response => {
          this.innerVisible = !this.innerVisible;
          this.scj();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    scj() {
      this.$http
        .get(this.poot + "selectfavoriteBymailbox/" + this.user)
        .then(response => {
          this.scjlist = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    selectbymailbox() {
      this.$http
        .get(this.poot + "selectbymailbox/" + this.user + "/" + this.index)
        .then(response => {
          if (response.data != "no") {
            this.shoucang = !this.shoucang;
            this.cid = response.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getMsgFormSon(data) {
      this.comment = parseInt(data);
    },

    browse() {
        this.$http
        .get(this.poot + "updateIntegral/" + this.index+"/"+this.user+"/"+1)
        .then(response => {})
        .catch(function(error) {
          console.log(error);
        });
      this.$http
        .get(this.poot + "browse/" + this.index)
        .then(response => {})
        .catch(function(error) {
          console.log(error);
        });
    },
    zanf() {
      if (this.zan) {
          this.$http
        .get(this.poot + "updateIntegral/" + this.index+"/"+this.user+"/"+2)
        .then(response => {})
        .catch(function(error) {
          console.log(error);
        });
        this.zan = false;
        this.$http
          .get(this.poot + "fabulous/" + this.index)
          .then(response => {
            this.open("点赞成功", "success");
            this.fabulous = 1;
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.zan = true;
        this.$http
          .get(this.poot + "fabulouscancel/" + this.index)
          .then(response => {
            this.open("取消成功", "warning");
            this.fabulous = 0;
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    sc(num) {
      if (this.shoucang) {
        this.outerVisible = !this.outerVisible;
          this.$http
        .get(this.poot + "updateIntegral/" + this.index+"/"+this.user+"/"+3)
        .then(response => {})
        .catch(function(error) {
          console.log(error);
        });
        this.$http
          .get(this.poot + "insertcollect/" + num + "/" + this.index)
          .then(response => {})
          .catch(function(error) {
            console.log(error);
          });
        this.$http
          .get(this.poot + "collection/" + this.index)
          .then(response => {
            this.open("收藏成功", "success");
            this.shoucang = true;
            this.collection = 1;
            this.selectbymailbox();
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    shoucangf() {
      if (this.shoucang) {
        this.outerVisible = true;
      } else {
        this.shoucang = true;
        this.$http
          .get(this.poot + "collectioncancel/" + this.index)
          .then(response => {
            this.$http
              .get(this.poot + "delectcollectbyid/" + this.cid)
              .then(response => {
                this.open("取消成功", "warning");
              })
              .catch(function(error) {
                console.log(error);
              });

            this.collection = 0;
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    titledata() {
      this.$http
        .get(this.poot + "selectblog/" + this.index)
        .then(response => {
          this.list = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    chushihua() {
      this.$http
        .get(this.poot + "selectblogtxt/" + this.index)
        .then(response => {
          this.html = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    open(message, type) {
      this.$message({
        message: message,
        type: type
      });
    }
  },

  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
    this.titledata();
    this.browse();
    this.selectbymailbox();
    this.scj();
  },
  components: {
    blogpinglun
  }
};
</script>
<style scoped>
.name {
  width: 100%;
  margin-top: 20px;
}
h4 {
  width: 400px;
  font-size: 15px;
  color: #409eff;
}
.item1 {
  display: flex;
  flex-wrap: wrap;
}
h3 {
  font-size: 15px;
  color: #354b7b;
}
.neirong::-webkit-scrollbar {
  display: none;
}

.neirong {
  margin: 20px;
  overflow: auto;
  height: 640px;
  background-color: #1e1e1e;
  padding: 10px;
}

.imgfont {
  margin-left: 12px;
}
img {
  height: 30px;
  margin-left: 20px;
}
.itemtitle {
  padding-left: 30px;
  background-color: #1e1e1e;
  height: 40px;
  margin: 20px;
  display: flex;
  justify-content: left;
  align-items: center;
}
.title {
  text-align: left;
  font-size: 25px;
  margin-top: 20px;
  margin-left: 20px;
  color: #354b7b;
}
.div1 {
  height: 760px;
  margin-top: 20px;
  margin-left: 20px;
  /* width: 80%; */
  background-color: #161616;
  overflow: auto;
}
.div1::-webkit-scrollbar {
  display: none;
}
</style>